<template>
	<view class="navbar">
		<view class="container">
			<image src="https://c-ssl.dtstatic.com/uploads/blog/202206/26/20220626195023_f1e25.thumb.1000_0.jpeg" mode="aspectFill"></image>
			<view class="info">
				<view class="name">充吖</view>
				<view class="phone">
					<view>未绑定手机号</view>
					<view class="btn">去绑定</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="main">
		<view class="item" @click="skip('/pages/myOrder/myOrder')">
			<image class="icon_style1" src="@/static/individualCenter/personal_icon07.png" mode="aspectFill"></image>
			<view>我的订单</view>
			<view class="g"></view>
		</view>
		<view class="item" @click="skip('/pages/helpCenter/helpCenter')">
			<image class="icon_style2" src="@/static/individualCenter/personal_icon03.png" mode="aspectFill"></image>
			<view>帮助中心</view>
			<view class="g"></view>
		</view>
		<view class="item" @click="skip('/pages/aboutUs/aboutUs')">
			<image class="icon_style4" src="@/static/individualCenter/personal_icon05.png" mode="aspectFill"></image>
			<view>关于我们</view>
			<view class="g"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	
	function skip(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.navbar {
		width: 100%;
		height: 250rpx;
		background: center/100% 100% url(@/static/individualCenter/personal_bg01.png) no-repeat;
		padding: 40rpx;
		
		.container {
			display: flex;
			align-items: center;
			
			image {
				width: 114rpx;
				height: 114rpx;
				border-radius: 50%;
				filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
			}
			
			.info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				
				.name {
					font-size: 34rpx;
					color: #ffffff;
				}
				
				.phone {
					font-size: 22rpx;
					color: #ffffff;
					margin-top: 22rpx;
					display: flex;
					align-items: center;
					
					.btn {
						width: 100rpx;
						height: 38rpx;
						background: center/100% 100% url(@/static/individualCenter/personal_but.png);
						text-align: center;
						line-height: 38rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.main {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		
		.item {
			width: 100%;
			height: 90rpx;
			border-bottom: 2rpx solid #efefef;
			color: #666666;
			font-size: 28rpx;
			white-space: nowrap;
			display: flex;
			align-items: center;
			padding: 20rpx;
			
			.icon_style1 {
				width: 40rpx;
				height: 43rpx;
				margin-right: 30rpx;
			}
			
			.icon_style2 {
				width: 38rpx;
				height: 38rpx;
				margin-right: 30rpx;
			}
			
			.icon_style4 {
				width: 40rpx;
				height: 35rpx;
				margin-right: 30rpx;
			}
			
			.g {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #b9b9b9;
				border-right: 1px solid #b9b9b9;
				transform: rotate(45deg);
				margin-left: auto;
			}
		}
	}
</style>